<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<title>学生管理 - 学生管理系统</title>
	<link rel="stylesheet" href="../css/public.css">
	<script>
		function setActive() {
			var buttons = document.getElementsByTagName('button');
			for (var i = 0; i < buttons.length; i++) {
				buttons[i].addEventListener('click', function () {
					for (var j = 0; j < buttons.length; j++) {
						buttons[j].classList.remove('active');
					}
					this.classList.add('active');
				});
			}
		}
	</script>
</head>

<body onload="setActive()">
	<header>
		<h1>学生管理系统</h1>
		<nav>
			<a href="../index.html"><button>首页</button></a>
			<button class="active">学生管理</button>
			<a href="clas.html"><button>班级管理</button></a>
		</nav>
	</header>
	<main>
		<h2>学生信息表</h2>
		<!-- 搜索框 -->
		<div class="search_box">
			<input type="text" id="searchInput" placeholder="请输入学生关键字进行搜索..." onkeyup="get_by_keyword(this.value)" />
		</div>
		<table id="studentTable" class="table_main">
			<thead>
				<tr>
					<th>学生id</th>
					<th>学生名称</th>
					<th>性别</th>
					<th>班级id</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="data_info"></tbody>
		</table>
		<div class="div_in_container">
			<div class="div_input_son_container">
				<h3>添加学生</h3>
				<div id="add_student">
					<input type="text" name="" id="add_student_input" placeholder="请输入学生名" />
					<select id="add_gender">
						<option value="男">男</option>
						<option value="女">女</option>
					</select>
					<input type="text" id="add_clas_id" placeholder="请输入班级ID" />
				</div>
				<button onclick="handle_add()">添加学生</button>
			</div>
			<div class="div_input_son_container">
				<h3>编辑学生</h3>
				<div id="edit_student"></div>
				<button onclick="">保存</button>
			</div>
		</div>
	</main>
	</main>
</body>
<script src="../js/request.js"></script>
<script>
	//删除
	function handle_delete(id){
		if (confirm("你确定要删除id为" + id + "的学生吗？")) {
			deleteData("http://127.0.0.1:8888/api/student/" + id, function(err, data) {
				if (err) {
					console.error(err);
				} else {
					alert("删除成功");
					location.reload()
				}
			});
		} else {
			console.log("用户选择了取消");
		}
	}
	// 搜索
	function get_by_keyword(keyword) {
		getData("http://127.0.0.1:8888/api/student/?keyword=" + keyword, function (error, data) {
			if (error) {
				console.error("请求出错：", error);
			} else {
				var tbody = document.getElementById("data_info")
				tbody.innerHTML = ""
				data["data"].forEach(function (value, index, array) {
					var tr = document.createElement("tr")
					var studentid = document.createElement("td")
					studentid.innerText = value["id"]
					var studentsname = document.createElement("td")
					studentsname.innerText = value["name"]
					var studentgender = document.createElement("td")
					studentgender.innerText = value["gender"]
					var studentclas_id = document.createElement("td")
					studentclas_id.innerText = value["clas_id"]
					var operate = document.createElement("td")
					var edit = document.createElement("span")
					edit.innerText = "编辑"
					operate.appendChild(edit)
					var del = document.createElement("span")
					del.innerText = "删除"
					del.addEventListener("click", function (){
						handle_delete(value["id"])
					})
					operate.appendChild(del)
					//挂载
					tr.appendChild(studentid)
					tr.appendChild(studentsname)
					tr.appendChild(studentgender)
					tr.appendChild(studentclas_id)
					tr.appendChild(operate)
					tbody.appendChild(tr)
				});
			}
		});
	}
	get_by_keyword("")

	// 增加
	function handle_add() {
		var name = document.getElementById("add_student_input").value;
		const gender = document.getElementById("add_gender").value;
		const clas_id = document.getElementById("add_clas_id").value;
		if (!name) {
			alert("请输入学生名称");
			return;
		}
		if (!clas_id) {
			alert("请输入班级ID");
			return;
		}
		postData("http://127.0.0.1:8888/api/student", {name: name,gender: gender,clas_id: clas_id}, function (err, data) {
			if (err) {
				console.error(err);
				alert("添加失败：" + err.message);
			} else {
				alert("新增成功");
				location.reload();
			}
		});
	}
</script>

</html>